<template>
  <el-drawer
    :visible.sync="visible"
    direction="rtl"
    title="题库"
    :append-to-body="true"
    :before-close="handleClose"
    :wrapper-closable="false"
    size="80%"
  >
    <div style="padding: 0 20px 10px">
      <el-row type="flex" justify="space-between" style="align-items: center">
        <div class="flex-start">
          <!-- <div class="bread">{{ cascader.departMajor[0].label }}<span>/</span></div>
          <div class="bread">{{ cascader.departMajor[1].label }}<span>/</span></div> -->
          <div class="bread">{{ cascader.treeNode.treeName }}</div>
        </div>
        <el-button type="primary" icon="el-icon-printer" :disabled="selectList.length === 0" @click="addPaper"
          >加入组卷中心({{ selectList.length }})</el-button
        >
      </el-row>
    </div>

    <div v-loading="loading" class="paper-detail">
      <QuestionTree v-if="visible" class="paper-left" :pagerReposId="cascader.treeNode.id" @on-ready="handleReady"></QuestionTree>
      <div v-if="visible" class="paper-right">
        <template v-if="paperList.length > 0">
          <div v-for="(item, index) in paperList" :key="index" class="paper-list">
            <div class="paper-question-type">第{{ numToChines(index + 1) }}部分：{{ dict.label.topic_type[item.questionType] }}</div>
            <div class="paper-question-list">
              <div v-for="(cItem, cIndex) in item.list" :key="cIndex" class="paper-question-item" :class="'id' + cItem.questionId">
                <paper-question :question-data="cItem" :question-index="cIndex" :active="checkSelected(cItem.questionId)">
                  <template slot="tools-button">
                    <template v-if="selectedIds.indexOf(cItem.questionId) !== -1">
                      <el-tag type="success">已选</el-tag>
                    </template>
                    <template v-else>
                      <el-button v-if="!checkSelected(cItem.questionId)" type="primary" @click="handleInsert(cItem)">加入题库</el-button>
                      <el-button v-else type="danger" @click="handleDelete(cItem)">移出题库</el-button>
                    </template>
                  </template>
                </paper-question>
              </div>
            </div>
          </div>
        </template>
        <el-empty v-else></el-empty>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import QuestionTree from "../../juanGenerate/components/QuestionTree.vue";
import PaperQuestion from "./question.vue";
import { getQuestionList, getQuestionListNew } from "@/api/juan/juanQuestion";
import { arrayToGroup, numToChines } from "@/utils";
export default {
  components: {
    QuestionTree,
    PaperQuestion,
  },
  dicts: ["topic_type", "difficulty"],
  data() {
    return {
      visible: false,
      paperList: [],
      selectList: [],
      loading: false,
      knowledgeId: null, // 知识点
      chapterId: null, // 章节
      cascader: {},

      selectedIds: []
    };
  },
  computed: {
    cascader_info() {
      return JSON.parse(localStorage.getItem('leftPanel'));
    },
  },
  watch: {
    cascader_info: {
      handler(val) {
        if (val) {
          this.cascader = val;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    numToChines,
    open(questionIds) {
      this.paperList = [];
      this.selectList = [];
      this.selectedIds = questionIds || [];
      this.visible = true;
      // this.getQuestionList();
    },
    handleClose() {
      this.visible = false;
    },
    handleReady(data) {
      if (data && "reposId" in data) {
        this.reposId = data.reposId;
      }
      if (data && "knowledgeId" in data) {
        this.knowledgeId = data.knowledgeId;
      } else {
        this.knowledgeId = null;
      }
      if (data && "chapterId" in data) {
        this.chapterId = data.chapterId;
      } else {
        this.chapterId = null;
      }
      this.getQuestionListNew();
    },
    getQuestionListNew() {
      let options = {
        pageNum: 1,
        pageSize: 10000,
        reposId: this.reposId,
        knowledgeId: this.knowledgeId,
        chapterId: this.chapterId,
      };

      this.loading = true;
      getQuestionListNew(options)
        .then((res) => {
          let questionGroup = arrayToGroup(res.data.rows, "questionType");
          let questionList = [];
          for (const key in questionGroup) {
            if (Object.hasOwnProperty.call(questionGroup, key)) {
              const element = questionGroup[key];
              questionList.push({
                questionType: key,
                list: element,
              });
            }
          }
          this.paperList = questionList;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleDelete(data) {
      let currIndex = this.selectList.findIndex((item) => {
        return item.questionId === data.questionId;
      });
      this.selectList.splice(currIndex, 1);
    },
    handleInsert(data) {
      this.selectList.push(data);
    },
    checkSelected(questionId) {
      let currIndex = this.selectList.findIndex((item) => {
        return item.questionId === questionId;
      });
      return currIndex === -1 ? false : true;
    },
    addPaper() {
      this.$emit("confirm", this.selectList);
      this.handleClose();
    },
  },
};
</script>

<style lang="scss" scoped>
.bread {
  padding-left: 10px;
  &:first-child {
    padding-left: 0px;
  }
  >span {
    padding-left: 10px;
  }
}

.paper-detail {
  position: relative;
  width: 100%;
  height: calc(100% - 50px);
  background-color: #f4f4f8;
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;

  .paper-left {
    flex-shrink: 0;
    // height: 100%;
    width: 300px;
    margin-right: 10px;
  }
  .paper-right {
    height: 100%;
    width: 0;
    flex: 1;
    overflow-y: auto;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
  }
}

.paper-list {
  .paper-question-type {
    font-size: 20px;
    color: #282f47;
    padding: 5px 0;
  }

  .paper-question-list {
    .paper-question-item {
      margin-top: 10px;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}

.paper-warp {
  position: relative;
  width: 100%;
  // height: 100%;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
}
</style>
